<template>
	<view class="content">
		<u-navbar class="navbar" :fixed="false" title="人员工资报表" :autoBack="false" :safeAreaInsetTop="true"
			:created-reload="true" leftIconColor="#fff" style="width: 100%;" @leftClick="goBack">
			<view class="u-nav-slot x-ec" slot="right">
				<view v-if="$store.state.systemConfig.sysDeviceInfo.osName != 'ios'" style="margin-right: 10rpx;color: #fff;"
					@click="revolveBtn">旋转</view>

				<view @click="rightClick" :style="{border: isFilter ? '2px solid #fff' : 'none'}"
					style="padding: 6rpx 8rpx;border-radius: 12px;">
					<text style="color: #fff;">筛选</text>
				</view>
			</view>
		</u-navbar>

		<view class="content_main" style="overflow: hidden;">
			<m-table ref="table" :width="screenWidth" :headers="headers" first-line-fixed :contents="contents"
				:bottom-computed-fixed="true" :computed-col="TableBottom" :height="TableHeight + 'px'"
				:min-height="['40px']" :font-size="['24']"></m-table>
		</view>


		<u-popup class="MainPopup PopupInit" :show="FilterPopup" mode="right" :round="12" @close="closeFilterPopup">

			<view class="f-dc" style="width: 80vw;height: 100vh;" :style="$utils.disposeSafeBottomFun()">
				<u-navbar :fixed="false" title="筛选" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeFilterPopup"></uni-icons>
					</view>
				</u-navbar>


				<view class="MainBox f-dc FilterMainBox">
					<view class="TitleBox">

						<m-field labelFontSize="14px" labelWidth="80px" paddings="12rpx 0" :borderBottom="true"
							label="开始时间:">
							<template v-slot:custom-value>
								<view class="x-f" @click="ChoiceTime('start')">
									<text v-if="FilterFormData.StartTime"
										class="Date_Text">{{dateFormat(FilterFormData.StartTime)}}</text>

									<text v-else style="font-size: 12px;color: #999;">请选择</text>
								</view>
							</template>
						</m-field>

						<m-field labelFontSize="14px" labelWidth="80px" paddings="12rpx 0" :borderBottom="true"
							style="margin-top: 10rpx;" label="结束时间:">
							<template v-slot:custom-value>
								<view class="x-f" @click="ChoiceTime('end')">
									<text v-if="FilterFormData.EndTime"
										class="Date_Text">{{dateFormat(FilterFormData.EndTime)}}</text>

									<text v-else style="font-size: 12px;color: #999;">请选择</text>
								</view>
							</template>
						</m-field>

						<m-field labelFontSize="14px" labelWidth="80px" paddings="12rpx 0" :borderBottom="true"
							style="margin-top: 10rpx;" label="工作中心:">
							<template v-slot:custom-value>
								<view @click="openBaseScreen('工作中心','radio')">
									<u--input placeholder="请选择" v-model="FilterFormData.FWorkshopName" readonly
										clearable :compulsoryShowClose="!!FilterFormData.FWorkshopName" border="none"
										suffixIcon="arrow-right" suffixIconStyle="color: #999"></u--input>
								</view>
							</template>
						</m-field>
					</view>
				</view>



				<view class="PopupBottomBox x-f">
					<button @click="ResetFilterBtn">重置</button>
					<button @click="ComfirmFilterBtn">筛选</button>
				</view>
			</view>
		</u-popup>


		<!-- 时间选择器 -->
		<u-datetime-picker class="DateTimerPick PopupInit" ref="datetimePicker" title="选择时间" :show="showTimePicker"
			v-model="DatetimeData" mode="date" :closeOnClickOverlay="true" @close="ClosePicker" @cancel="ClosePicker"
			@confirm="ConfirmTime" :formatter="formatter"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isFilter: false,
				FilterPopup: false,
				FilterFormData: {
					StartTime: '',
					EndTime: '',
					FWorkshopName: '',
					FWorkshopID: 0,
				},
				showTimePicker: false,
				DatetimeData: '',
				headers: [{
					label: '工作中心',
					key: 'FWorkshopName',
					width: 180
				}, {
					label: '合格数',
					key: 'FDailyQtt',
					bottomComputedFormat: true,
					FormatType: 'price',
					width: 180
				}, {
					label: '工废数',
					key: 'IndustrialWaste',
					bottomComputedFormat: true,
					FormatType: 'price',
					width: 180
				}, {
					label: '料废数',
					key: 'MaterialWaste',
					bottomComputedFormat: true,
					FormatType: 'price',
					width: 180
				}, {
					label: '报废数',
					key: 'FNgQty',
					bottomComputedFormat: true,
					FormatType: 'price',
					width: 180
				}, {
					label: '报工总数',
					key: 'FSumQty',
					bottomComputedFormat: true,
					FormatType: 'price',
					width: 180
				}, {
					label: '计件工资',
					key: 'GZJJ',
					bottomComputedFormat: true,
					FormatType: 'price',
					width: 180
				}, {
					label: '计时工资',
					key: 'GZJS',
					bottomComputedFormat: true,
					FormatType: 'price',
					width: 180
				}, {
					label: '工资合计',
					key: 'GZHJ',
					bottomComputedFormat: true,
					FormatType: 'price',
					width: 180
				}],
				TableBottom: ['GZHJ'],
				contents: [],
				TableHeight: 600,
				pageRevolve: false, // 判断是否旋转, true-横屏；false-竖屏
				screenWidth: 'auto'
			};
		},
		onLoad() {

			this.UserInfo = this.$store.state.UserInfo;

			// console.log(this.UserInfo.UserID)
			this.getPageData();
		},
		watch: {
			'FilterFormData.FWorkshopName': { // 工作中心
				handler(newVal) {
					if (this.$utils.isEmpty(newVal)) {
						this.FilterFormData.FWorkshopID = 0;
					}
				},
				deep: true
			}
		},
		mounted() {
			let that = this;

			that.getTableHeight();

			uni.$on('Payroll_Choice', (ret) => {
				if (ret.type == '工作中心') {
					that.FilterFormData = Object.assign(that.FilterFormData, ret.data);
				}
			})
		},
		onUnload() {
			uni.$off('Payroll_Choice');
		},
		onBackPress(options) { // 监听页面返回
			this.goBack();
			return true;
		},
		methods: {
			revolveBtn() { // 旋转按钮
				let that = this;
				let type = this.pageRevolve;

				if (type) {
					// 当前为横屏
					plus.screen.lockOrientation('portrait'); // 切换到竖屏  
				} else {
					// 当前为竖屏
					plus.screen.lockOrientation('landscape'); // 切换到横屏
				}
				this.pageRevolve = !type;
				setTimeout(() => {
					that.getTableHeight();
				}, 500)

			},
			getTableHeight() { // 获取表格高度
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						let safeArea = res.safeAreaInsets; // 安全区域嵌入 top - bottom

						let windowHeight = res.windowHeight; // 总高
						let navHeight = 0;
						uni.createSelectorQuery().select('.navbar').boundingClientRect(rect => {
							navHeight = rect.height
						}).exec();

						setTimeout(() => {

							that.$nextTick(() => {

								that.TableHeight = windowHeight - safeArea.top - safeArea
									.bottom -
									navHeight + 10;
							})
						}, 300)

					}
				});
			},

			getPageData() {
				let that = this;
				this.$utils.showLoading();
				let request1 = that.Request.PromiseRequest('XGD_GetEmplByUser', {
					UserID: that.UserInfo.UserID
				});

				let request2 = null;

				request1.promise.then((data) => {
					request1 = null;

					request2 = that.Request.PromiseRequest('XGD_EmplPieceTime', {
						EmplID: data.data.ds[0].EmplID,
						FSDate: that.dateFormat(that.FilterFormData.StartTime),
						FEDate: that.dateFormat(that.FilterFormData.EndTime),
						FWorkshopID: that.FilterFormData.FWorkshopID || 0,
					});

					return request2.promise
				}).then((ret) => {
					this.$utils.hideLoading()
					if (ret.status == 200) {

						that.contents = ret.data.ds;
					}

				}).catch((error) => {

					if (this.request1) {
						this.request1.requestTask.abort(); // 取消第一个请求
					}
					if (this.request2) {
						this.request2.requestTask.abort(); // 取消第二个请求
					}

					this.$utils.hideLoading()
				});
			},
			openBaseScreen(str, type, ) { // 下拉单选
				let that = this;

				if (type == 'radio') {
					let obj = null;
					let url = '/commonPage/Tool/baseScreen';

					if (str == '工作中心') {
						obj = {
							allowClear: false,
							cmd: 'XGD_Workshop',
							type: str,
							ListeningName: 'Payroll_Choice',
							// multiple: false,
							serverSearch: {
								isPaging: true, //是否分页
								searchKey: 'SearchKey', //搜索关键词，应包含在param中
								showText: 'FWorkshopName', //查询结果显示的字段
								pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
								// subText: [{
								// 	label: '编号',
								// 	labelKey: ''
								// }],
								ChoiceDataKey: 'FWorkshopID',
								ChoiceDataData: that.FilterFormData.FWorkshopID,
							},
							param: {
								SearchKey: '',
								PageIndex: 1,
								PageSize: 30
							},
						}
					}

					this.$store.commit('ChangeAndSetStateData', {
						Name1: 'BaseScreenParm',
						data: obj
					})

					uni.navigateTo({
						url: url
					})

				}

			},
			ResetFilterBtn() {
				let that = this;
				Object.keys(that.FilterFormData).forEach((key) => {
					if (!['StartTime', 'EndTime'].includes(key)) {
						if (Array.isArray(that.FilterFormData[key])) {
							that.FilterFormData[key] = [];
						} else if (typeof that.FilterFormData[key] === 'object') {
							that.FilterFormData[key] = {};
						} else {
							that.FilterFormData[key] = '';
						}
					}
				});
				that.FilterFormData['FWorkshopID'] = 0;
				// that.closeFilterPopup();
			},
			ComfirmFilterBtn() {
				let that = this;

				that.getPageData();
				that.FilterPopup = false;
			},
			dateFormat(val) { // 格式化时间
				var that = this;
				if (!that.$utils.isEmpty(val)) {
					return that.Request.dateFormat(new Date(val), 'Y-MM-dd');
				} else {
					// return '请选择'
					// return that.Request.dateFormat(new Date(), 'Y-MM-dd');
					return ''
				}
			},
			formatter(type, value) { // 时间选择器数据格式化
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			ClosePicker() { // 关闭时间选择器
				this.DatetimeData = Number(new Date());
				this.showTimePicker = false;
			},
			ConfirmTime(data) { // 确认时间
				if (this.TimeType == 'start') {

					if (!this.$utils.isEmpty(this.FilterFormData.EndTime) && Number(data.value) > Number(this
							.FilterFormData
							.EndTime)) {
						return uni.showToast({
							title: '开始时间不能高于结束时间',
							icon: 'none'
						});
					}

					this.FilterFormData.StartTime = data.value;
				} else if (this.TimeType == 'end') {
					if (!this.$utils.isEmpty(this.FilterFormData.StartTime) && Number(data.value) < Number(this
							.FilterFormData
							.StartTime)) {
						return uni.showToast({
							title: '结束时间不能低于开始时间',
							icon: 'none'
						});
					}
					this.FilterFormData.EndTime = data.value;
				}
				this.showTimePicker = false;
			},
			ChoiceTime(type) { // 点击时间
				var that = this;
				this.TimeType = type;
				let dates = new Date();
				if (type == 'start') {
					if (!that.$utils.isEmpty(that.FilterFormData.StartTime)) {
						dates = that.FilterFormData.StartTime;
					}
					that.DatetimeData = Number(dates);
					this.PickerTitle = '开始时间';
				} else if (type == 'end') {
					if (!that.$utils.isEmpty(that.FilterFormData.EndTime)) {
						dates = that.FilterFormData.EndTime;
					}
					that.DatetimeData = Number(dates);
					this.PickerTitle = '结束时间';
				} else {
					that.DatetimeData = Number(new Date());
					this.PickerTitle = '';
				}

				that.showTimePicker = true;
			},
			rightClick() { // 导航栏打开筛选
				this.FilterPopup = true;
			},
			/**
			 * 关闭筛选弹层
			 */
			closeFilterPopup() { // 关闭筛选弹层
				this.FilterPopup = false;
			},
			goBack() {
				uni.navigateTo({
					url: '/commonPage/Tool/TransitBackPage'
				});
			},

		}
	}
</script>

<style lang="scss">
	.MainPopup {

		.u-transition {
			z-index: 9999999 !important;
		}

		// 筛选弹层
		.FilterMainBox {
			padding: 20rpx 30rpx !important;
			flex: 1;
			overflow: auto;
			padding-bottom: 20px;

			.TitleBox {
				font-size: 14px;
				margin-bottom: 20rpx;
			}

			// 时间选择样式
			.Select_Box {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;

				.Select_Date {
					justify-content: space-between;
					padding: 6px 12px;
					background-color: #f0f0f0;
					border: 1px solid #f0f0f0;
					border-radius: 9999px;
					width: 46%;
					margin-top: 8px;
				}

				.Select_Date_Active {
					background-color: #e1f7f8 !important;
					border: 1px solid #51d0d0 !important;
					color: #51d0d0 !important;
				}

				// 起止时间
				.ChoiceTimesBox {
					width: 100%;
					display: flex;
					align-items: center;
					// background-color: #fff;
					padding: 10px 20px;
					margin-top: 6px;

					.TimeBox {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						margin-left: 10px;

						.timer {
							width: 100%;
							flex: 2;
							display: flex;
							flex-direction: column;
							// align-items: center;
							font-size: 16px;
							color: #333;

							text:first-child {
								margin-bottom: 10px;
								font-weight: 600;
							}

							text:last-child {
								height: 20px;
							}

							.Date_Text {
								color: #999;
							}
						}

						.Icon {
							flex: 1;
						}
					}
				}

			}


		}


		.ProgressBox {
			display: flex;
			flex-direction: column;
			padding: 20px;
			min-width: 70vw;
			position: relative;

			.Type {
				border-radius: 14px;
				font-weight: 600;
				padding: 4px 8px;
				font-size: 14px;
				position: absolute;
				top: 16px;
				right: 20px;
				// background-color: #e5e5e5;
				// color: #333;
			}

			// 未报工
			.Type_0 {
				background-color: #e8e8e8;
				color: #3c3c3c;
			}

			// 已完成
			.Type_1 {
				background-color: #d9f5ec;
				color: #269b74;
			}

			// 指定完成
			.Type_-1 {
				background-color: #f5fccd;
				color: #d0d30b;
			}

			// 部分报工
			.Type_2 {
				background-color: #d7eefc;
				color: #1d87cf;
			}

			.TitleName {
				font-size: 16px;
				font-weight: 600;
				color: #333;
			}
		}

		.MainBox {
			padding: 0px 2px;
			flex: 1;
			overflow: auto;
		}

		.PopupBottomBox {
			justify-content: space-evenly;
			padding: 8rpx 8rpx;
			border-top: 1px solid #ececec;

			button {
				width: 44%;

				&:first-child {
					background-color: #fff;
					color: #51d0d0;
					border: 1px solid #51d0d0;
				}

				&:last-child {
					background-color: #51d0d0;
					color: #fff;
				}
			}
		}

	}

	// 时间选择器
	.DateTimerPick {

		.u-transition {
			z-index: 9999999 !important;
		}
	}
</style>